<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<script>
    window.onload = function () {

        var app4 = new Vue({
            el: '#app-4',
                data: {
                    username:0,
                    age:0,
                    message: 'Hello Vue.js!',
                    people: [
                        { name: '朱喜凯', age: '3',time:new Date()},
                        { name: 'sdfsafa', age: '13',time:new Date()},
                    ]
                },
            methods: {
                addpeople:function () {
                    var x={name:this.username,age:this.age,time:new Date()}
                    this.people.push(x);
                },
                removeall:function() {
                    this.people = [];
                },
                remove:function(index){
                    this.people.splice(index, 1);
                }
            },
            filters:{
                ymdhms(val){
                    return ((val.getFullYear()+"."+(val.getMonth()+1)+"."+val.getDate()+"  "
                    +val.getHours()+":"+val.getMinutes()+":"+val.getSeconds()))
                }
            }
        })
    }
</script>
<body>

<div id="app-4">
    <button v-on:click="addpeople">添加</button>
    <button v-on:click="removeall">全部删除</button><br>
    <input v-model="username"><br>
    <input v-model="age">
    <table border="1">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>添加时间</td>
            <td>操作</td>
        </tr>
        <tr v-for="(todo,index) in people">
            <td>{{index+1}}</td>
            <td>  {{todo.name}} </td>
            <td> {{todo.age}}</td>
            <td>{{todo.time|ymdhms}}</td>
            <td><button v-on:click="remove(index)">删除</button></td>
        </tr>
    </table>
</div>
</body>
</html>